<template>
    <div class="integraLayout">
        <path-tracking :path='path' />
        <div class="seeIntegra">
            <div>
              <div class="tableTitle">
                    <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                    <div class="tableText">积分总览</div>
              </div>
              <ul>
                    <li>
                        <h2>{{allIntegraData.availableScore}}</h2>
                        <span>可使用积分</span>
                    </li>
                    <li>
                        <h2>{{allIntegraData.expiringScore}}</h2>
                        <span>即将过期积分</span>
                    </li>
                    <li>
                        <h2>{{allIntegraData.usedScore}}</h2>
                        <span>已使用积分</span>
                    </li>
                </ul>
            </div>
            <div>
                <div class="tableTitle">
                    <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                    <div class="tableText">积分明细</div>
                </div>
                <div class="formLayout">
                    <el-table
                        :data="integraDetailData"
                    >
                        <el-table-column v-for="(item,index) in integraTableH" :label="item.label" 
                            :prop="item.prop" 
                            :key="index"
                            align="center"
                        >
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import tabelcom from '../../components/pages/table'
import datas from '../../customerList/checkDetail/datas.js'
import pathTracking from '@/components/common/pathTracking'
export default {
    name: 'checkDetail',
    components:{
        tabelcom,
        pathTracking
    },
    data(){
        return{
            path: ['CRM', '客户管理', {label: '会员积分', name: 'memberScores'}, '查看'],
            integraTableH:datas.integraTableH,//积分账户
            integraDetailData:[],
            cardWallet:[],
            allIntegraData:{
                availableScore: '0',
                expiringScore: '0',
                usedScore: '0'
            }, //积分总览
        }
    },
    methods:{
        toJump(){
            this.$router.push({name:'memberScores'})
        },
        //获取积分账户数据
        getIntegraDetail(id){
            var that = this;
            that.$ajax({
                methods:'GET',
                url: api.crm + '/accountRecord/getScoreDetailById?id=' + id,
            }).then((res) => {
                console.log('获取积分账户',res)
                var data = res.data;
                if(data.status == 200 && data.result){
                    that.allIntegraData = data.result;
                    var integraDetail = data.result.accountRecords;
                    var detailObj = {}
                    let arr = []
                    for(let i = 0; i < integraDetail.length; i++){
                        detailObj = {
                            changingWay:integraDetail[i].changingWay, //变动渠道
                            changingReason:integraDetail[i].changingReason, //变动原因
                            changingDate:integraDetail[i].changingDate,//变动时间
                            changingAccount:integraDetail[i].changingAccount,//变动积分
                            remainingAccount:integraDetail[i].remainingAccount,//剩余积分
                            orderId:integraDetail[i].orderId,//订单编号
                            status:integraDetail[i].status,//状态
                            purpose:integraDetail[i].purpose,//用途
                            effectiveDateStart:integraDetail[i].effectiveDateStart,//生效时间
                            effectiveDateEnd:integraDetail[i].effectiveDateEnd,//过期时间
                            operatingPersonnel:integraDetail[i].operatingPersonnel,//操作人
                            remark:integraDetail[i].remark//备注
                        }

                        if(integraDetail[i].status == 0){
                            detailObj.status = '未激活'
                        }else if(integraDetail[i].status == 1){
                            detailObj.status = '未使用完'
                        }else if(integraDetail[i].status == 2){
                            detailObj.status = '使用完'
                        }
                        arr.push(detailObj)
                    }
                    that.integraDetailData = arr;
                }else{
                    console.log('减肥瘦身地方都是了麻烦吗')
                }
            })
        },
    },
    activated() {
        var id = this.$route.query.id;
        //console.log('积分总览Id',id)
        this.getIntegraDetail(id);
    }
}
</script>

<style>
@import '../../components/css/viewCommon.css';

</style>

<style scoped>

.seeIntegra{
    margin: 16px;
    background: #fff;
}
/*积分*/
.seeIntegra ul,.seeTrade ul{
  display: flex;
  justify-content: center;
  height: 98px;
}
.seeIntegra ul li,.seeTrade ul li{
  width: 250px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-right: 22px;
  color: #fff;
  padding: 18px 0;
  border-radius: 8px
}
.seeIntegra ul li:first-child{
    background-image: linear-gradient(-90deg, 	#9db919 0%, 	#bcc92b 100%), linear-gradient(#ffffff, #ffffff);
    background-blend-mode: normal, normal;
}
.seeIntegra ul li:nth-child(2){
    background-image: linear-gradient(-90deg, #d85c30 0%, #e87d26 100%),
    linear-gradient( #e67828, #e67828);
    background-blend-mode: normal, normal;
}

.seeIntegra ul li:nth-child(3){
    background-image: linear-gradient(-90deg, #eab71b 0%, #edcb2a 100%),
    linear-gradient(#eab91d, #eab91d);
    background-blend-mode: normal, normal;
}
.seeIntegra ul li:last-child,seeTrade ul li:last-child{
      margin-right: 0
}
.seeIntegra ul li h2,.seeTrade ul li h2{
    font-size: 30px;
    /* margin-bottom: 26px; */
}
.seeIntegra ul li span,.seeTrade ul li span{
    color: #fff;
    font-size: 14px;
}

</style>